<template>
  <div class="dashboard-container">
    <!-- 卡片容器 -->
    <el-card>
      <!-- 表单组件 -->
      <el-form
        ref="formRef"
        class="goods-form"
        :rules="formRules"
        :model="formInput"
        label-width="100px"
      >
        <!-- 商品分类 -->
        <el-form-item label="商品分类" prop="goodsCategoryId">
          <!-- 通过props属性配置加载规则 -->
          <el-cascader :placeholder="cateName" :props="props" style="width: 40%" @change="cateChange" />
        </el-form-item>
        <!-- 商品名称 -->
        <el-form-item label="商品名称" prop="goodsName">
          <el-input v-model="formInput.goodsName" placeholder="请输入内容" />
        </el-form-item>
        <!-- 商品简介 -->
        <el-form-item label="商品简介">
          <el-input
            v-model="formInput.goodsIntro"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!-- 商品价格 -->
        <el-form-item label="商品价格" prop="originalPrice">
          <el-input
            v-model="formInput.originalPrice"
            type="number"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!-- 商品售卖价 -->
        <el-form-item label="商品售卖价" prop="sellingPrice">
          <el-input
            v-model="formInput.sellingPrice"
            type="number"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!-- 商品库存 -->
        <el-form-item label="商品库存" prop="stockNum">
          <el-input
            v-model="formInput.stockNum"
            type="number"
            placeholder="请输入内容"
          />
        </el-form-item>
        <!-- 商品标签 -->
        <el-form-item label="商品标签">
          <el-input v-model="formInput.tag" placeholder="请输入内容" />
        </el-form-item>
        <!-- 上架状态 -->
        <el-form-item label="上架状态">
          <el-radio-group v-model="formInput.goodsSellStatus">
            <el-radio :label="0">上架</el-radio>
            <el-radio :label="1">下架</el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 商品主图 -->
        <el-form-item label="商品主图" prop="goodsCoverImg">
          <!-- 在自定义事件中$event为第一个参数值 -->
          <Upload v-model="formInput.goodsCoverImg" />
        </el-form-item>
        <!-- 详情内容 -->
        <el-form-item label="详情内容">
          <Tiptap v-model="formInput.goodsDetailContent" />
        </el-form-item>
        <!-- 操作按钮 -->
        <el-form-item>
          <el-button type="primary" @click="submitForm">{{ id ? '立即修改' : '立即创建' }}</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// 导入封装的请求
import service from '@/utils/request'
import Upload from '@/components/Upload'
import Tiptap from '@/components/Tiptap'

export default {
  name: 'AddGoods',
  components: { Upload, Tiptap },
  data() {
    return {
      // 商品id
      id: '',
      // 分类名
      cateName: '',
      formInput: {
        goodsSellStatus: 0
      },
      // 校验规则
      formRules: {
        goodsCategoryId: {
          required: true,
          message: '分类不能为空',
          trigger: 'change'
        },
        goodsName: { required: true, message: '商品名称不能为空' },
        originalPrice: { required: true, message: '价格不符合要求' },
        sellingPrice: { required: true, message: '价格不符合要求' },
        stockNum: { required: true, message: '库存不符合要求' },
        goodsCoverImg: { required: true, message: '商品图片不能为空' }
      },
      // 级联选择器动态加载
      props: {
        // 开启动态加载
        lazy: true,
        // 加载数据方法(默认调用一次【加载一级分类】)
        async lazyLoad(node, resolve) {
          const { level, value } = node
          // 加载数据逻辑:  默认加载1级传0、点击1级加载2级传一级id、点击2级加载3级传二级id、点击3级不加载
          // 准备请求参数
          const params = {
            pageNumber: 1,
            pageSize: 100,
            categoryLevel: level + 1,
            parentId: value || 0
          }
          // 发起请求
          const { data } = await service.get('/categories', { params })
          // 为数据结构中添加leaf字段
          // 渲染数据 通过返回数据中的leaf字段判断是否能加载
          const list = data.list.map((item) => ({
            ...item,
            leaf: item.categoryLevel > 2
          }))
          resolve(list)
        },
        label: 'categoryName',
        value: 'categoryId'
      }
    }
  },
  mounted() {
    // 将当前参数保存
    this.id = this.$route.query.id
    // 调用方法获取商品信息
    if (this.id) {
      this.getInfo()
    }
  },
  methods: {
    // 选择商品分类【保存三级分类id】
    cateChange(value) {
      this.formInput.goodsCategoryId = value.at(-1)
    },
    // 提交表单数据
    async submitForm() {
      try {
        // 获取表单实例 调用验证方法
        await this.$refs.formRef.validate()
        // 判断操作类型
        if (this.id) {
          // 修改
          await this.$http.put('/goods', this.formInput)
          this.$message.success('修改成功')
        } else {
          // 添加
          await this.$http.post('/goods', this.formInput)
          this.$message.success('添加成功')
        }
        this.$router.push('/manage/goods')
      } catch (error) {
        console.log('验证失败')
      }
    },
    // 获取商品信息
    async getInfo() {
      const { data } = await this.$http.get('/goods/' + this.id)
      // 将商品信息 渲染到表单中
      // 拼接商品分类名
      this.cateName = `${data.firstCategory.categoryName} / ${data.secondCategory.categoryName} / ${data.thirdCategory.categoryName}`
      this.formInput = data.goods
    }
  }
}
</script>

<style lang="scss" scoped>
.goods-form {
  .el-input,
  .el-textarea {
    width: 40%;
  }
}
</style>
